<template>
  <van-pull-refresh v-model="isLoading" @refresh="onRefresh" id="draw" success-text="刷新成功">
    <div class="top"></div>
    <!-- <van-nav-bar   safe-area-inset-top /> -->
    <van-swipe :autoplay="3000" lazy-render class="header">
      <van-swipe-item v-for="image in advlb" :key="image">
        <img class="img lbimg" v-lazy="image.imgurl" @click="ToadUrl(image.url)" />
      </van-swipe-item>
    </van-swipe>
    <div class="nav">
      <span class="navtxt1"></span>
      <span class="navtxt">核心功能</span>
    </div>
    <van-divider class="divider" />
    <van-grid :border="false" :column-num="4">
      <div class="tarbra flex">
        <van-grid-item v-for="item in tarimgs" :key="item.id" @click="topro(item.title)">
          <img :src="item.imgurl" />
          <div class="text">{{ item.title }}</div>
        </van-grid-item>
      </div>
    </van-grid>
    <div class="xian bg"></div>
    <van-notice-bar class="notice" background="#fff" left-icon="volume-o" :text="bofang" />
    <div class="width-92 flex h82">
      <img @click="ToadUrl(item.url)" v-lazy="item.imgurl" class="img48" v-for="item in advsy" :key="item.id" />
    </div>
    <div class="xian bg"></div>
    <div class="nav">
      <span class="navtxt1-o"></span>
      <span class="navtxt-o">热门职位</span>
      <van-icon name="fire" class="hot" />
    </div>
    <van-divider class="divider" />
    <div class="listtodo">
      <ProLiets :data="data" />
    </div>
    <Overlay :show="show" bgcolor />
  </van-pull-refresh>
</template>

<script>
// @ is an alias to /src
// import { ref } from "vue";
import { Get } from "@/api/axios";
import $router from "../router/index";
import Overlay from "../components/Home/Overlay.vue";
import ProLiets from "../components/Home/ProLiets.vue";
import { reactive, toRefs } from "vue";
export default {
  name: "Home",
  components: {
    Overlay,
    ProLiets,
  },
  setup() {
    const images = reactive({
      show: false,
      advlb: [],
      advsy: [],
      adurl: window.axiosurl,
      isLoading: false,
    });
    const jzdata = reactive({
      data: [],
    });

    const onRefresh = () => {
      setTimeout(async () => {
        images.isLoading = false;
        await getjz();
      }, 1000);
    };
    // window.mui.plusReady(() => {
    //   images.show = false;
    // });
    const getad = async () => {
      const data = await Get({ url: "index/getAdv" });
      data.data.data.lb.forEach((element) => {
        element.imgurl = {
          src: images.adurl + "/" + element.imgurl,
          loading: require("../assets/home/loading.png"),
        };
      });
      images.advlb = data.data.data.lb;
      data.data.data.sy.forEach((element) => {
        element.imgurl = {
          src: images.adurl + "/" + element.imgurl,
          loading: require("../assets/home/loading2.png"),
        };
      });
      images.advsy = data.data.data.sy;
    };
    getad();
    const getjz = async () => {
      const phoneType = localStorage.getItem("phoneType");
      let dtailinfo = {};
      if (phoneType == "iOS") {
        dtailinfo = {
          platform: "ios",
          imei: JSON.stringify({ idfa: localStorage.getItem("idfa") }),
        };
      } else if (phoneType == "Android") {
        dtailinfo = {
          platform: "android",
          imei: localStorage.getItem("imei"),
        };
      }
      images.show = true;
      const data = await Get({
        url: "index/getWorkList",
        data: { type: "首页", ...dtailinfo },
      });
      images.show = false;
      jzdata.data = data.data.data;
    };
    getjz();

    const tarimgs = [
      {
        imgurl: require("../assets/home/图标1.png"),
        title: "热门招聘",
      },
      {
        imgurl: require("../assets/home/图标2.png"),
        title: "简单易做",
      },
      {
        imgurl: require("../assets/home/图标3.png"),
        title: "轻松职位",
      },
      {
        imgurl: require("../assets/home/图标4.png"),
        title: "名企直聘",
      },
    ];
    function topro(tit) {
      $router.push({ path: "/projectlist", query: { tit: tit } });
    }
    function ToadUrl(url) {
      if (!url == "") {
        $router.push({ path: "/Iframe", query: { url } });
      } else {
        topro(tarimgs[Math.floor(Math.random() * tarimgs.length - 1)].title);
      }
    }

    let bofang = window.bofang;

    return {
      ...toRefs(images),
      ...toRefs(jzdata),
      tarimgs,
      topro,
      getad,
      ToadUrl,
      onRefresh,
      bofang,
    };
  },
};
</script>

<style lang="scss" scoped>
#draw {
  -webkit-overflow-scrolling: touch;
}
.h82 {
  height: 82px;
}
.header {
  height: 185px;
  padding-top: constant(safe-area-inset-top);
  padding-top: env(safe-area-inset-top);
}
.tarbra {
  height: 110px;
  width: 100%;
  img {
    width: 75%;
  }
}
.hot {
  width: 10px;
  color: red;
  float: right;
}
.xian {
  height: 10px;
  width: 100%;
  margin: 5px auto;
}

.nav {
  width: 92%;
  font-size: 18px;
  margin: 0 auto;
  .navtxt1-o {
    border-left: #ff5e2b 3px solid;
  }
  .navtxt-o {
    padding-left: 5px;
    font-size: 18px;
    font-weight: 600;
    color: #ff5e2b;
  }
}
.navtxt {
  padding-left: 5px;
  font-size: 18px;
  font-weight: 600;
  color: #108de8;
}
.navtxt1 {
  border-left: #108de8 3px solid;
}
.top {
  height: 15px;
}
.img {
  width: 100%;
}
.img48 {
  width: 48%;
}
.text {
  font-size: 14px;
  font-weight: 600;
}
.listtodo {
  width: 94%;
  margin: 0 auto;
  background: white;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}
</style>>

  